import { Table } from '@arco-design/web-react';
import { columns } from './tools.tsx'
import { getImage } from '@/tools'
import { useSelector } from "react-redux";
import { optionsTab } from '@/views/market/components/select-dropdown/tools.ts'
import './index.less'
import { useEffect, useState } from 'react';

type SelectTabType = {
  // tabs选中值
  tabValue?: number
  // tabs方法
  setTabValue: (num: number) => void
  // 现货合约值
  indexVal: number
}

function SelectTab(props: SelectTabType) {
  const { tabValue, setTabValue, indexVal } = props
  const theme = localStorage.getItem('theme')
  const list = useSelector(state => state?.router?.value);
  const listNew = useSelector(state => state?.router?.list);
  const [listInfo, setListInfo] = useState([])

  const handelList = () => {
    switch (tabValue) {
      case 0:
        setListInfo(listNew)
        break
      case 1:
        setListInfo(list)
        break
      case 2:
        break
      default:
        break
    }
  }

  useEffect(() => {
    handelList()
  }, [tabValue])

  useEffect(() => {
    if (list?.length > 0 && tabValue === 1) {
      setListInfo(list)
    }
    if (tabValue === 0) {
      setListInfo(listNew)
    }
  }, [list])



  return (
    <>
      <Table rowKey="id" pagination={false} columns={columns} data={listInfo} className={'table-body'} noDataElement={<div>
        <img style={{ width: 98, height: 86 }} src={getImage('market', `${theme === 'dark' ? 'kr.png' : 'br.png'}`)} alt="" />
        {
          tabValue === 0 && <div className='table-optional' onClick={() => setTabValue(indexVal === 0 ? 1 : 2)}>{'添加自选'}</div>
        }
      </div>}>

      </Table>
    </>
  )
}

export default SelectTab